<template>
	<tm-sheet
	:color="props.color"
	:followTheme="props.followTheme"
	:dark="props.dark"
	:followDark="props.followDark"
	:round="props.round"
	:shadow="props.shadow"
	:outlined="props.outlined"
	:border="props.border"
	:borderStyle="props.borderStyle"
	:borderDirection="props.borderDirection"
	:text="props.text"
	:transprent="props.transprent"
	:linear="props.linear"
	:linearDeep="props.linearDeep"
	:width="props.width"
	:height="props.height"
	:margin="props.margin"
	:padding="props.padding"
	>
		<view class="flex flex-row flex-row-top-start" >
			<view v-if="ctl.avatar" class="mr-24" style="min-width: 60rpx;align-items: stretch;">
				<tm-avatar :round="12"  @click="emits('avatar-click',$event)" :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :size="60" :img="ctl.avatar"></tm-avatar>
			</view>
			<view class="flex  flex-9 flex-col wh5">
				<view class=" flex flex-row  " :class="[_align.time]">
					<slot name="author"><tm-text @click="emits('author-click',$event)" :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :color="ctl.authorColor" :fontSize="ctl.authorFontSize" :label="ctl.author"></tm-text></slot>
					<slot name="time"><tm-text @click="emits('time-click',$event)" v-if="_time" :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" _class="pl-24 opacity-5" :fontSize="22" :label="_time"></tm-text></slot>
				</view>
				<view class="flex flex-col  py-12" >
					<slot name="content">
						<tm-text @click="emits('content-click',$event)" :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :fontSize="28" :label="ctl.content"></tm-text>
					</slot>
				</view>
				<view class="flex flex-row  flex-1 flex-nowrap" :class="[_align.action]">
					<slot name="actions">
						<!-- <view class="flex flex-row flex-center pl-16">
							<tm-icon :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :font-size="24" name="tmicon-comment-dots"></tm-icon>
							<tm-text :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" _class="pl-10"  :font-size="24" label="125"></tm-text>
						</view>
						<view class="flex flex-row flex-center pl-16">
							<tm-icon :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :font-size="24" name="tmicon-md-heart"></tm-icon>
							<tm-text :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" _class="pl-10" :font-size="24" label="125"></tm-text>
						</view> -->
					</slot>
				</view>
				<tm-divider v-if="ctl.borderBottom"></tm-divider>
				<slot></slot>
			</view>
		</view>
	</tm-sheet>
</template>

<script lang="ts" setup>
	/**
	 * 评论
	 * @description 评论可以嵌套使用。
	 * @template default,author,time,content,actions
	 * @emits ['avatar-click','author-click','content-click','time-click']
	 */
	import { getCurrentInstance, computed, ref, provide, inject , onUpdated, onMounted, onUnmounted, nextTick ,watch, PropType } from 'vue';
	import { cssstyle, tmVuetify,colorThemeType } from '../../tool/lib/interface';
	import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs';
	import tmSheet from "../tm-sheet/tm-sheet.vue";
	import tmText from "../tm-text/tm-text.vue";
	import tmIcon from "../tm-icon/tm-icon.vue";
	import tmDivider from "../tm-divider/tm-divider.vue";
	import tmAvatar from "../tm-avatar/tm-avatar.vue";
	const emits = defineEmits(['avatar-click','author-click','content-click','time-click'])
	const props = defineProps({
		...custom_props,
		shadow:{
			type: [Number],
			default: 0
		},
		round: {
			type: [Number],
			default: 4
		},
		border: {
			type: [Number],
			default: 0
		},
		width: {
			type: [Number],
			default: 0
		},
		height: {
			type: [Number],
			default: 0
		},
		margin: {
		  type: Array as PropType<Array<number>>,
		  default: () => [32,8],
		},
		padding: {
		  type: Array as PropType<Array<number>>,
		  default: () => [24, 24],
		},
		transprent: {
			type: [Boolean],
			default: false
		},
		color: {
			type: String,
			default: 'white'
		},
		//是否显示底部的边线。
		borderBottom:{
			type: [Boolean],
			default: false
		},
		author:{
			type:String,
			default:""
		},
		authorColor:{
			type:String,
			default:"primary"
		},
		authorFontSize:{
			type:Number,
			default:26
		},
		avatar:{
			type:String,
			default:""
		},
		content:{
			type:String,
			default:""
		},
		time:{
			type:String,
			default:""
		},
		//时间和下面的操作按钮是靠左还是靠右。
		align:{
			type:String,
			default:"right" //right,left
		}
		
	})
	
	//距离当前时间段。
	const _time = computed(()=>uni.$tm.u.getDateToNewData(props.time))
	
	const _align = computed(()=>{
		let agn = {
			time:'flex-between',
			action:'flex-row-center-end flex-1'
		};
		if(props.align=='left'){
			agn = {
				time:'flex-start',
				action:'flex-row-center-start'
			};
		}
		return agn;
	})
	const ctl = computed(()=>{
		return {
			time:props.time,
			content:props.content,
			author:props.author,
			authorColor:props.authorColor,
			avatar:props.avatar,
			authorFontSize:props.authorFontSize,
			borderBottom:props.borderBottom
		}
	})
</script>

<style scoped>
.wh5{

	width:  0;

}
</style>
